<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>收费查询</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        .span_title {
            font-size: 16px;
            color: black;
            margin: 40px 25px;
        }

        .span_content {
            font-size: 15px;
            color: black;
        }

        .p_content {
            margin-top: 17px;
        }
    </style>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">挂号单号:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="outpatientId" placeholder="请输入挂号单号" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">患者姓名:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="patientName" placeholder="请输入患者姓名" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="caseOrder-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--添加和修改弹出层-->
<div style="display: none;padding: 3px" id="seeCaseOrder">
    <div class="layui-bg-gray" style="padding: 10px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="height: 160px;">
                    <div class="layui-card-body">
                        <div class="layui-col-md6" style="height: 140px;">
                            <p class="p_content"><span class="span_title">订单号:</span><span id="orderId"
                                                                                           class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">患者名称:</span><span id="patientName"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">总金额:</span><span id="price"
                                                                                           class="span_content"></span><span
                                    class="span_content" style="margin-left: 10px;">¥</span>
                            </p>
                        </div>
                        <div class="layui-col-md6" style="height: 140px;">
                            <p class="p_content"><span class="span_title">挂号单号:</span><span id="outpatientId"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">支付类型:</span><span id="payType"
                                                                                            class="span_content"></span>
                            </p>
                            <p class="p_content"><span class="span_title">创建时间:</span><span id="createTime"
                                                                                            class="span_content"></span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">[ 检查处方 ]&nbsp;[ 1 ]&nbsp;[ 处方总额
                ]&nbsp;:&nbsp;¥&nbsp;<span id="checkPrice"></span>
            </h2>
            <div class="layui-colla-content layui-show">
                <table id="pre-table" lay-filter="pre-table"></table>
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">[ 药品处方 ]&nbsp;[ 2 ]&nbsp;[ 处方总额
                ]&nbsp;:&nbsp;¥&nbsp;<span id="drugPrice"></span>
            </h2>
            <div class="layui-colla-content layui-show">
                <table id="drugInfo-table" lay-filter="drugInfo-table"></table>
            </div>
        </div>
    </div>
</div>

<!--数据表格-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="caseOrder-table" lay-filter="caseOrder-table"></table>
    </div>
</div>

<!--行工具栏-->
<script type="text/html" id="caseOrder-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="see"><i class="layui-icon layui-icon-list">
        查看详情
    </i>
    </button>
</script>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

        let cols = [
            [{
                title: '订单号',
                field: 'orderId',
                align: 'center',
            },
                {
                    title: '挂号单号',
                    field: 'outpatientId',
                    align: 'center'
                },
                {
                    title: '患者姓名',
                    field: 'patientName',
                    align: 'center',
                },
                {
                    title: '总金额',
                    field: 'price',
                    align: 'center',
                },
                {
                    title: '支付类型',
                    field: 'payType',
                    align: 'center',
                    templet: function (d) {
                        let str;
                        if (d.payType == 1) {
                            str = '<font>现金</font>';
                        } else if (d.payType == 2) {
                            str = '<font>微信</font>';
                        } else if (d.payType == 3) {
                            str = '<font>支付宝</font>';
                        }
                        return str;
                    }
                },
                {
                    title: '订单状态',
                    field: 'orderState',
                    align: 'center',
                    templet: function (d) {
                        let str;
                        if (d.orderState == 1) {
                            str = '<font>支付成功</font>';
                        } else if (d.orderState == 2) {
                            str = '<font>未支付</font>';
                        }
                        return str;
                    }
                },
                {
                    title: '创建时间',
                    field: 'createTime',
                    align: 'center',
                },
                {
                    title: '操作',
                    toolbar: '#caseOrder-bar',
                    align: 'center',
                }
            ]
        ]

        var tableIns = table.render({
            elem: '#caseOrder-table',
            url: '/caseOrder/loadCaseOrderPage',
            page: true,
            cols: cols,
            response: {
                statusCode: 200
            },
            done: function (res, curr, count) {
                if (res.data.length == 0 && curr != 1) {
                    tableIns.reload({
                        page: {
                            curr: (curr - 1)
                        }
                    });
                }
            },
        });

        //行监听
        table.on('tool(caseOrder-table)', function (obj) {
            if (obj.event === 'see') {
                see(obj);
            }
        });

        //表格监听
        form.on('submit(caseOrder-query)', function (data) {
            table.reload('caseOrder-table', {
                where: data.field
            })
            return false;
        });

        //查看详情
        let mainIndex;

        function see(obj) {
            mainIndex = layer.open({
                type: 1,
                title: ['查看' + obj.data['patientName'] + '收费详情', 'font-size:18px;text-align: center;'],
                shade: 0.1,
                area: ['1080px', '600px'],
                content: $("#seeCaseOrder"),
                success: function (index) {
                    $("#orderId").text(obj.data['orderId']);
                    $("#patientName").text(obj.data['patientName']);
                    $("#price").text(obj.data['price']);
                    $("#outpatientId").text(obj.data['outpatientId']);
                    let type;
                    if (obj.data['payType'] == 1) {
                        type = "现金";
                    } else if (obj.data['payType'] == 2) {
                        type = "微信";
                    } else if (obj.data['payType'] == 3) {
                        type = "支付宝";
                    }
                    $("#payType").text(type);
                    $("#createTime").text(obj.data['createTime']);

                    //加载检查处方数据表格
                    table.render({
                        elem: '#pre-table',
                        url: '/prescription/loadInspectTable/' + obj.data['outpatientId'],
                        cols: [
                            [
                                {field: 'inspectId', title: '检查项ID', align: 'center', hide: true},
                                {field: 'inspectName', title: '项目名称', align: 'center'},
                                {field: 'company', title: '单位', align: 'center'},
                                {field: 'price', title: '单价', align: 'center'},
                                {field: 'money', title: '金额', align: 'center'},
                                {field: 'remark', title: '检查备注', align: 'center'},
                                {
                                    field: 'isPay', title: '状态', align: 'center', templet: function (d) {
                                        let str;
                                        if (d.isPay == 1) {
                                            str = '<font style="color: green">已缴费</font>';
                                        } else if (d.isPay == 2) {
                                            str = '<font style="color: red">未缴费</font>';
                                        }
                                        return str;
                                    }
                                }
                            ]
                        ],
                        page: false,
                        response: {
                            statusCode: 200
                        },
                        done: function () {
                            loadInspectMoney();
                        }
                    });

                    //加载检查处方总价
                    function loadInspectMoney() {
                        $.ajax({
                            url: "/prescription/loadInspectMoney/" + obj.data['outpatientId'],
                            dataType: "json",
                            method: "GET",
                            success: function (result) {
                                $("#checkPrice").text(result.data);
                            }
                        })
                    }

                    //加载药用处方数据表格
                    table.render({
                        elem: '#drugInfo-table',
                        url: '/prescription/loadDrugInfoTable/' + obj.data['outpatientId'],
                        cols: [
                            [
                                {field: 'drugId', title: '药品ID', align: 'center', hide: true},
                                {field: 'drugName', title: '药品名称', align: 'center'},
                                {field: 'number', title: '数量', align: 'center'},
                                {field: 'price', title: '单价', align: 'center'},
                                {field: 'money', title: '金额', align: 'center'},
                                {field: 'remark', title: '服用备注', align: 'center'},
                                {
                                    field: 'isPay', title: '状态', align: 'center', templet: function (d) {
                                        let str;
                                        if (d.isPay == 1) {
                                            str = '<font style="color: green">已缴费</font>';
                                        } else if (d.isPay == 2) {
                                            str = '<font style="color: red">未缴费</font>';
                                        }
                                        return str;
                                    }
                                }
                            ]
                        ],
                        page: false,
                        response: {
                            statusCode: 200
                        },
                        done: function () {
                            loadDrugMoney();
                        }
                    });

                    //加载药用处方总价
                    function loadDrugMoney() {
                        $.ajax({
                            url: "/prescription/loadDrugMoney/" + obj.data['outpatientId'],
                            dataType: "json",
                            method: "GET",
                            success: function (result) {
                                $("#drugPrice").text(result.data);
                            }
                        })
                    }
                }
            });
        }

    })
</script>
</body>
</html>
